<template>
    <div class="app-container">
        <el-table class="table-compact" :data="list" v-loading.body="listLoading"
                  element-loading-text="拼命加载中" stripe fit
                  highlight-current-row>
            <el-table-column
                    prop="username"
                    label="用户名">
            </el-table-column>

            <el-table-column
                    label="操作">
                <template scope="scope">
                        <el-button type="text" >编辑</el-button>
                    <el-button @click="deleteUser(scope.row._id)" type="text" >删除</el-button>
                </template>
            </el-table-column>

        </el-table>

    </div>
</template>

<script>
  import fetch from '@/utils/fetch';
  import {parseTime} from '@/utils';

  export default {
    components: {},
    data() {
      return {
        list: null,
        listLoading: true,
        pageInfo: {
          pageIndex: 1,
          pageSize: 50,
          totalCount: 0
        }
      }
    },
    watch: {
      'pageInfo.pageIndex': 'fetchData',
      'pageInfo.pageSize': 'fetchData',
    },
    created() {
      this.fetchData();
    },
    computed: {

    },
    methods: {
      fetchData() {
        this.listLoading = true;
        fetch({
          url: '/users',
          method: 'get',
          params: {
            q:{
              query: {},
              sort: {_id:1},
              page: {
                index: this.pageInfo.pageIndex,
                size: this.pageInfo.pageSize
              }
            }
          }
        }).then(res => {
          this.list = res.data.pageDatas;
          this.pageInfo.totalCount = res.data.pageuser.totalCount;
          this.listLoading = false;
        })


      },
      deleteUser(id){

      },


    }
  };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .checkbox-item{
        display: block;
        margin: 6px 20px 6px 10px;
    }
    .img{
        margin: 8px 0;
        width: 80px;
        height: 60px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        &[lazy=error],&[lazy=loading]{
            background-size: 50%;
        }
    }
    .time{
        word-break:break-all ;
    }
    .search-input{
        width: 300px;
    }

</style>
